<template>
  <div class="community">
    <div class="header-wrap">
      <div class="hear-text">社区</div>
    </div>
    <div class="community-type" style="margin-top: 1.2rem;" @click="tips">
      <div class="community">
        <!-- 分类列表 -->
        <listSwiper :message='minItem'/>
      </div>
    </div>
    <div class="type">
      <span>选择功能</span>
    </div>
    <div class="information">
      <ul>
        <li @click="tips">
           <!-- @click="toinformation" -->
          <img src="../../assets/images/ification-new.png" alt="">
          <p>政务信息</p>
        </li>
        <li @click="toNewUrl">
          <!-- @click="toforum" -->
          <img src="../../assets/images/community-new.png" alt="">
          <p>社区论坛</p>
        </li>
      </ul>
    </div>
    <div class="activity" @click="tips">
      <ul>
        <li>
          <div class="activity-time">
            <span class="day">10</span>
            <span class="month">9月</span>
          </div>
          <div class="activity-name">
            <span class="name">活动名</span>
            <span class="festival">教师节</span>
          </div>
          <div class="activity-icon">
            <div class="activity-box">
              <img src="../../assets/images/ic_send.png" alt="">
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import listSwiper from './components/listSwiper'
export default {
  data(){
    return{
      minItem : [
        {
          path:'/repair',
          imgSrc:require("@/assets/images/10.jpg"),
          Text: '电子产品'
        },
        {
          path:'/parcel',
          imgSrc:require("@/assets/images/11.jpg"),
          Text: '服装服饰'
        },
        {
          path:'/guide',
          imgSrc:require("@/assets/images/5.jpg"),
          Text: '美妆香水'
        }
      ],
    }
  },
  methods:{
    tips(){
      this.$toast({
        message:'功能正在开发中',
        duration: 800
      })
    },
  toNewUrl(){
    window.location.href="https://mall.nengyoukeji.com/app/index.php?i=23&c=entry&m=ewei_shopv2&do=mobile&r=sns";
  }
  },
  components:{
    listSwiper
  }
}
</script>

<style scoped>
.community{
  overflow: hidden;
}
.hear-text{
  font-size: .32rem;
  width: 100%;
  text-align: center;
}
.type{
  font-size: .32rem;
  display: flex;
  margin: 0 .25rem 0 .35rem;
  color: #fff;
  height: 1rem;
  line-height: 1rem;
}
.type span:nth-of-type(1){
  flex: 1;
}
.type span:nth-of-type(2){
  width: auto;
  text-align: right;
  font-size: .28rem;
  color: #ee5a8a;
}
.information{
  width: 100%;
  height: 2rem;
}
.information ul{
  margin: 0 .35rem;
  height: 100%;
  display: flex;
  color: #000;
  font-weight: bold;
}
.information li{
  background: #fff;
  text-align: center;
  width: 47%;
  border-radius: .2rem;
}
.information li:nth-of-type(1){
  margin-right: 6%;
}
.information li p{
  margin-top: .1rem;
}
.information img{
  margin-top: .35rem;
  width: .75rem;
  height: .75rem;
}
.activity{
  width: 100%;
  height: auto;
  padding-bottom: 1.5rem;
}
.activity ul{
  height: 100%;
  margin: 0 .35rem;
}
.activity ul li{
  border-radius: .2rem;
  display: flex;
  background: #fff;
  width: 100%;
  height: 2rem;
  font-weight: bold;
  margin-top: .35rem;
}
.activity-time{
  flex: 1;
  text-align: center;
}
.activity-time .day{
  margin-top: .25rem;
  font-size: .8rem;
  color: #FD5585;
  font-weight: bold;
  display: block;
  /* font-family: fantasy; */
  letter-spacing: 0;
}
.activity-time .month{
  color: #57c5c6;
}
.activity-name{
  flex: 2;
}
.activity-name .name{
  font-size: .32rem;
  color: #000;
  display: block;
  margin: .5rem 0 .1rem 0;
}
.activity-name .festival{
  color: #57c5c6;
}
.activity-icon{
  flex: 1;
}
.activity-box{
  margin: .58rem 0 0 .3rem;
  width: .8rem;
  height: .8rem;
  border-radius: 50%;
  background: #FD5585;
}
.activity-box img{
  width: 60%;
  height: 60%;
  margin: .16rem 0 0 .16rem;
}
</style>

